<template>
  <div class="creative-center-container no-background-container" v-loading="listLoading">
    <el-row :gutter="50" style="margin-bottom: 20px;">
      <el-col :span="20">
        <el-descriptions :column="3">
          <el-descriptions-item>
            <template #label>任务ID</template>
            {{ detailForm.uid }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>任务状态</template>

            <span v-if="detailForm.content">已完成</span>
            <span v-if="!detailForm.content">进行中</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>企业名称</template>
            {{ detailForm.company_name ?? "" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>创建时间</template>
            {{ detailForm.create_time_name ?? "" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>创建人</template>
            {{ detailForm.nickname ?? "" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="4">
        <el-button @click="handleLogDetail()">日志详情</el-button>
        <el-button @click="handleConfigDetail()">配置详情</el-button>

      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :lg="17" :md="12" :sm="24" :xl="17" :xs="24">
        <vab-card style="">
          <template #header>
            报告正文
          </template>
          <el-scrollbar style="height:62vh;overflow-y: scroll">
            <div v-html="detailForm.content.LLM_result_core_business.replace(/\n/g, '<br/>')">
            </div>
          </el-scrollbar>
        </vab-card>
      </el-col>
      <el-col :lg="7" :md="12" :sm="24" :xl="7" :xs="24">
        <vab-card style="height:35vh">
          <template #header>
            产品/服务词
          </template>
          <el-scrollbar style="height: 180px;overflow-y: scroll"
                        v-html="detailForm.content.LLM_result_product.replace(/\n/g, '<br/><br/>')">
          </el-scrollbar>
        </vab-card>
        <vab-card style="height: 35vh">
          <template #header>
            行业词
          </template>
          <el-scrollbar style="height: 180px;overflow-y: scroll"
                        v-html="detailForm.content.LLM_result_category.replace(/\n/g, '<br/><br/>')">

          </el-scrollbar>
        </vab-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {ArrowRight, CaretBottom, CaretTop} from '@element-plus/icons-vue'
import {random} from 'lodash-es'
import landscape from '/@/assets/common_images/landscape.jpg'
import {getDetail} from '/@/api/company'

const listLoading = ref<boolean>(true)
const detailForm = reactive<any>({
  uid: '',
  company_name: '',
  content: {},
  create_time_name: '',
})

const getDetails = async (id) => {
  listLoading.value = true
  const {data} = await getDetail({id: id})
  Object.assign(detailForm, data) // 使用Object.assign来合并对象
  listLoading.value = false
}
const route: any = useRoute()
const router = useRouter()
defineOptions({
  name: 'companySearch',
})

const queryForm = reactive<any>({
  company_name: '',
})
const search = () => {
  console.log(queryForm.company_name)
}
onBeforeMount(() => {
  const id = route.query.id
  getDetails(id)
})
const handleLogDetail = () => {
  const id = route.query.id
  router.push({
    path: '/historySearch/LogDetail',
    query: {
      id: id,
    },
  })

}
const handleConfigDetail = () => {
  const id = route.query.id
  router.push({
    path: '/companyConfig/companyConfigDetail',
    query: {
      id: id,
    },
  })

}
</script>

<style lang="scss" scoped>
.creative-center-container {
  .item-content-wrap {
    display: flex;
    align-items: center;
    justify-items: center;

    :deep() {
      .el-image {
        width: 80px;
        margin-right: 15px;
        border-radius: var(--el-border-radius-base);
      }
    }
  }

  .el-statistic {
    --el-statistic-content-font-size: 28px;
  }

  .statistic-card {
    height: 100%;
    padding: var(--el-padding);
    background-color: var(--el-bg-color-overlay);
    border-radius: 4px;

    :deep() {
      .el-statistic__head {
        margin-bottom: var(--el-margin);

        [class*='ri'] {
          margin-top: -1.5px;
          margin-right: 3px;
        }

        .ri-user-heart-line {
          color: var(--el-color-danger);
        }

        .ri-contacts-book-2-line {
          color: var(--el-color-primary);
        }

        .ri-money-cny-circle-line {
          color: var(--el-color-warning);
        }
      }

      .el-statistic__head,
      .el-statistic__content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
      }
    }

    .statistic-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      margin-top: var(--el-margin);
      font-size: var(--el-font-size-small);
      color: var(--el-text-color-regular);

      .footer-item {
        display: flex;
        align-items: center;
        justify-content: center;

        span:last-child {
          display: inline-flex;
          align-items: center;
          margin-left: 4px;
        }
      }

      .green {
        color: var(--el-color-success);
      }

      .red {
        color: var(--el-color-error);
      }
    }
  }

  .vab-card {
    ul {
      padding: 0;
      margin: 0;
      line-height: 30px;
      list-style: none;

      span {
        color: var(--el-color-grey);
      }
    }

    :deep() {
      .el-card__header {
        .more {
          position: absolute;
          right: var(--el-margin);
          cursor: pointer;
        }
      }
    }
  }

  :deep() {
    .el-descriptions__body {
      background: none;
    }

    .el-carousel {
      margin-bottom: 20px;
      border-radius: var(--el-border-radius-base);

      &__item {
        .el-image {
          width: 100%;
          object-fit: fill;
        }
      }
    }
  }
}
</style>
